<template>
  <div class="post-list">
    <div>
      <div class="post-item card" v-if="postList.images.length >= 3">
        <h4 :title="postList.title" class="post-title">
          <nuxt-link :to="`/post/postDetails?id=${postList.id}`">{{
            postList.title
          }}</nuxt-link>
        </h4>

        <p class="post-desc">
          <nuxt-link :to="`/post/postDetails?id=${postList.id}`">
            <div v-html="`${postList.summary}`"></div>
          </nuxt-link>
        </p>

        <el-row
          class="card-images"
          type="flex"
          justify="space-between"
          align="middle"
        >
          <a href="#">
            <img :src="postList.images[0]" alt="" />
          </a>
          <a href="#">
            <img :src="postList.images[1]" alt="" />
          </a>
          <a href="#">
            <img :src="postList.images[2]" alt="" />
          </a>
        </el-row>

        <el-row class="post-info" type="flex" justify="space-between">
          <el-row class="post-info-left" type="flex" align="middle">
            <span>
              <i class="el-icon-location-outline"></i>
              {{ postList.cityName }}
            </span>
            <el-row class="post-user" type="flex" align="middle">
              by
              <a href="#"
                ><img
                  :src="
                    $axios.defaults.baseURL + postList.account.defaultAvatar
                  "
                  alt=""
                />
              </a>
              <a href="#">{{ postList.account.nickname }}</a>
            </el-row>
            <span>
              <i class="el-icon-view"></i>
              {{ postList.watch }}
            </span>
          </el-row>
          <span class="post-info-right">{{ postList.like }}👍</span>
        </el-row>
      </div>

      <div v-if="postList.images.length < 3 && postList.images.length > 0">
        <el-row class="post-item" type="flex" justify="justify" align="middle">
          <div class="post-cover" align="middle">
            <a href="#">
              <img :src="postList.images[0]" alt="" />
            </a>
          </div>

          <div class="post-content">
            <h4 :title="postList.title" class="post-title">
              <nuxt-link :to="`/post/postDetails?id=${postList.id}`">
                {{ postList.title }}
              </nuxt-link>
            </h4>

            <p class="post-desc">
              <nuxt-link :to="`/post/postDetails?id=${postList.id}`">
                <div v-html="postList.summary"></div>
              </nuxt-link>
            </p>

            <el-row class="post-info" type="flex" justify="space-between">
              <el-row class="post-info-left" type="flex" align="middle">
                <span>
                  <i class="el-icon-location-outline"></i>
                  {{ postList.cityName }}
                </span>
                <el-row class="post-user" type="flex" align="middle">
                  by
                  <a href="#"
                    ><img
                      src="http://157.122.54.189:9095/assets/images/avatar.jpg"
                      alt=""
                    />
                  </a>

                  <a href="#">{{ postList.account.nickname }}</a>
                </el-row>
                <span>
                  <i class="el-icon-view"></i>
                  {{ postList.watch }}
                </span>
              </el-row>
              <span class="post-info-right">{{ postList.like }}👍</span>
            </el-row>
          </div>
        </el-row>
      </div>

      <div v-if="postList.images.length == 0">
        <div class="post-content" style="width:700px">
          <h4 :title="postList.title" class="post-title">
            <nuxt-link :to="`/post/postDetails?id=${postList.id}`">
              {{ postList.title }}
            </nuxt-link>
          </h4>

          <p class="post-desc">
            <nuxt-link :to="`/post/postDetails?id=${postList.id}`">
              <div v-html="postList.summary"></div>
            </nuxt-link>
          </p>

          <el-row class="post-info" type="flex" justify="space-between">
            <el-row class="post-info-left" type="flex" align="middle">
              <span>
                <i class="el-icon-location-outline"></i>
                {{ postList.cityName }}
              </span>
              <el-row class="post-user" type="flex" align="middle">
                by
                <a href="#"
                  ><img
                    src="http://157.122.54.189:9095/assets/images/avatar.jpg"
                    alt=""
                  />
                </a>

                <a href="#">{{ postList.account.nickname }}</a>
              </el-row>
              <span>
                <i class="el-icon-view"></i>
                {{ postList.watch }}
              </span>
            </el-row>
            <span class="post-info-right">{{ postList.like }}👍</span>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 数据
    postList: {
      type: Object,
      // 默认是空数组
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {};
  },
  created() {
    // console.log(this.postList);
  },
  methods: {}
};
</script>

<style lang="less" scoped>
.post-list {
  width: 700px;
  // overflow: hidden;
  .post-item {
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
  }
  .post-cover {
    width: 220px;
    height: 150px;
    overflow: hidden;
    flex-shrink: 0;
    margin-right: 10px;
    img {
      display: block;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
    }
  }
  .post-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 15px;
    font-weight: 400;
    font-size: 18px;

    a:hover {
      color: orange;
    }
  }
  .post-desc {
    margin-bottom: 15px;
    line-height: 1.5;
    font-size: 14px;
    height: 63px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    a {
      color: #666;
    }
  }

  .card-images {
    margin: 15px 0;
    img {
      width: 220px;
      height: 150px;
      display: block;
      -o-object-fit: cover;
      object-fit: cover;
    }
  }

  .post-info {
    .post-info-left {
      font-size: 12px;
      color: #999;
      > * {
        margin-right: 10px;
      }
      i {
      }
      .post-user {
        a {
          color: orange;
        }
        img {
          display: block;
          width: 16px;
          height: 16px;
          border-radius: 100px;
          margin: 5px;
        }
      }
    }
    .post-info-right {
      color: orange;
    }
  }

  .post-content {
    flex: 1;
    width: 470px;
  }
}
</style>
